<template>
<div class="main-page no-margin">
    <div class="top-right">
      <note></note>
    </div>
    <navbar-model></navbar-model>
    <sidebar-model :init_active="active"></sidebar-model>
    <div class="taskList-box">
      <taskList :tasks="tasks"></taskList>
    </div>
  </div>
</template>

<script>
import NavbarModel from './NavbarModel.vue'
import SidebarModel from './SidebarModel.vue'
import taskList from './taskList.vue'
import note from './note.vue'

export default {
  data () {
    return {
      active: 'todo-list',
      tasks: [
        {
          id: '1'
        },
        {
          id: '2'
        },
        {
          id: '3'
        }
      ]
    }
  },
  created () {
    console.log('mainpage')
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  },
  components: {
    SidebarModel,
    taskList,
    NavbarModel,
    note
  }
}
</script>
<style scoped>
.main-page {
  background: linear-gradient(to bottom right, #95b691, #d3e5d0);
  width: 100%;
  height: 100vh;
}
.no-margin {
  margin: 0;
}
.top-right {
  position: absolute;
  top: 30%;
  right: 0;
}
.taskList-box {
  width: 100%;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
